<template>
    <div>
        <keep-alive>
            <router-view />
        </keep-alive>


        <van-tabbar v-model="active">
            <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/shopcar" icon="cart-o" :badge="$store.getters.getCarTotalNumber">购物车</van-tabbar-item>
            <van-tabbar-item to="/user" icon="contact">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0
        };
    },
    watch: {
        // $route
        '$route': {
            handler: function (newRouter, oldRouter) {
                console.log(this.$route);
                let { name } = newRouter.meta
                const nameMap = {
                    'home': 0,
                    'shopcar': 1,
                    'user': 2,
                }
                let active = nameMap[name]
                this.active = active
            },
            immediate: true
        }
    }
}
</script>

<style lang="scss" scoped>
.van-tabbar {
    min-width: 320px;
    max-width: 750px;
    left: 50%;
    transform: translateX(-50%);
}
</style>